<script setup lang="ts">
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

function onBack() {
  if (window.history.state.back) history.back()
  else router.replace('/')
}

const title = computed(() => {
  if (!route.meta) return ''
  return (route.meta?.title as string) || ''
})

const showLeftArrow = computed(() => {
  if (!route.meta) return false

  return !route.meta.level
})
</script>

<template>
  <van-nav-bar
    :title="title"
    :fixed="true"
    clickable
    placeholder
    :left-arrow="showLeftArrow"
    @click-left="onBack"
  />
</template>
